<!DOCTYPE html>
<html>
    <head>
        <title>New Topic</title>
        <% include ../common/link %>
        <script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.all.js"></script>
        <script type="text/javascript" charset="utf-8" src="/js/ueditor/zh-cn.js"></script>
		<style>

		</style>
    </head>
    <body>
        <% include ../common/header %>
        <div class="container" style="margin-top:5%;margin-bottom:70px">
            <form method="post" action="/topics/createTopic" class="form-horizontal" id="topicForm">
                <div class="form-group">
                    <div class="col-md-3 text-right">
                        <label>Title</label>
                    </div>
                    <div class="col-md-8 text-left">
                        <input type="text" name="title" value="" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3 text-right">
                        <label>Type</label>
                    </div>
                    <div class="col-md-2 text-left">
                        <select class="form-control" name="type">
                            <%if(typeList.length !== 0){%>
                                <%for(var i=0;i<typeList.length;i++){%>
                                    <option value="<%=typeList[i]._id%>"><%=typeList[i].catename%></option>
                                <%}%>
                            <%}%>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3 text-right">
                        <label>Content</label> 
                    </div>
                    <div class="col-md-8">
                        <script id="editor" type="text/plain" style="width:100%;height:500px;" name="content"></script>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3 text-right">
                    </div>
                    <div class="col-md-8">
                        <input type="button" name="post" value="Post" class="btn btn-primary">
                    </div>
                </div>
            </form>
            
        </div>
        <% include ../common/footer %>
    </body>
    <script>
        var ue = UE.getEditor('editor');   
        $("input[name='post']").on("click",function(){
            var title = $('input[name="title"]').val();
            if(title === "" || title.trim().length === 0){
                alert("title cannot be empty.");
                return;
            }
            $("#topicForm").submit();
        });


    </script>
</html>